<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222"><meta name="generator" content="Hexo 7.3.0">

  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.ico">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.ico">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha256-wiz7ZSCn/btzhjKDQBms9Hx4sSeUYsDrTLg7roPstac=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancyapps-ui/5.0.28/fancybox/fancybox.css" integrity="sha256-6cQIC71/iBIYXFK+0RHAvwmjwWzkWd+r7v/BX3/vZDc=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.2.4/themes/green/pace-theme-minimal.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.2.4/pace.min.js" integrity="sha256-gqd7YTjg/BtfqWSwsJOvndl0Bxc8gFImLEkXQT8+qj0=" crossorigin="anonymous"></script>

<script class="next-config" data-name="main" type="application/json">{"hostname":"sumumm.github.io","root":"/","images":"/images","scheme":"Gemini","darkmode":false,"version":"8.19.2","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":{"enable":true,"style":"mac"},"fold":{"enable":true,"height":300},"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":true,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":true,"transition":{"menu_item":"fadeInDown","post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"},"path":"/search.xml","localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false}}</script><script src="/js/config.js"></script>

    <meta name="description" content="本文主要是LCD应用编程——显示PNG图片的相关笔记，若笔记中有错误或者不合适的地方，欢迎批评指正😃。">
<meta property="og:type" content="article">
<meta property="og:title" content="LV18-01-LCD应用编程-05-显示PNG图片">
<meta property="og:url" content="https://sumumm.github.io/post/eba3d429.html">
<meta property="og:site_name" content="苏木">
<meta property="og:description" content="本文主要是LCD应用编程——显示PNG图片的相关笔记，若笔记中有错误或者不合适的地方，欢迎批评指正😃。">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013110431614.png">
<meta property="og:image" content="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013110642552.png">
<meta property="og:image" content="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013110845239.png">
<meta property="og:image" content="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013112235314.png">
<meta property="og:image" content="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013112212188.png">
<meta property="og:image" content="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013112305438.png">
<meta property="og:image" content="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013112457650.png">
<meta property="og:image" content="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013113931404.png">
<meta property="og:image" content="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013163719902.png">
<meta property="og:image" content="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013164409026.png">
<meta property="og:image" content="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013164615321.png">
<meta property="og:image" content="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013165015077.png">
<meta property="og:image" content="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013165116048.png">
<meta property="og:image" content="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013165215109.png">
<meta property="og:image" content="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013171315056.png">
<meta property="og:image" content="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013184139133.png">
<meta property="og:image" content="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013183910923.png">
<meta property="og:image" content="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013183941341.png">
<meta property="og:image" content="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013190551607.png">
<meta property="og:image" content="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013193615783.png">
<meta property="article:published_time" content="2024-10-27T11:29:45.000Z">
<meta property="article:modified_time" content="2025-06-13T16:25:57.036Z">
<meta property="article:author" content="苏木">
<meta property="article:tag" content="(ALPHA)LV03-应用开发">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013110431614.png">


<link rel="canonical" href="https://sumumm.github.io/post/eba3d429.html">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":"","permalink":"https://sumumm.github.io/post/eba3d429.html","path":"post/eba3d429.html","title":"LV18-01-LCD应用编程-05-显示PNG图片"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>LV18-01-LCD应用编程-05-显示PNG图片 | 苏木</title>
  








    <script src="/js/browser_tools_disable.js"></script>

  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
<!-- hexo injector head_end start --><link rel="stylesheet" href="https://unpkg.com/hexo-next-tags-plus@latest/lib/tag_plus.css" media="defer" onload="this.media='all'"><!-- hexo injector head_end end --></head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <div class="column">
      <header class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <p class="site-title">苏木</p>
      <i class="logo-line"></i>
    </a>
      <p class="site-subtitle" itemprop="description">我的学习之路</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger" aria-label="搜索" role="button">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>苏木的家</a></li><li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类页<span class="badge">42</span></a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档页<span class="badge">673</span></a></li><li class="menu-item menu-item-flink"><a href="/flink/" rel="section"><i class="fa fa-link fa-fw"></i>友人帐</a></li><li class="menu-item menu-item-about"><a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于我</a></li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup"><div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off" maxlength="80"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close" role="button">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div class="search-result-container no-result">
  <div class="search-result-icon">
    <i class="fa fa-spinner fa-pulse fa-5x"></i>
  </div>
</div>

    </div>
  </div>

</header>
        
  
  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%B8%80%E3%80%81PNG%E6%A0%BC%E5%BC%8F%E5%9B%BE%E7%89%87%E7%AE%80%E4%BB%8B"><span class="nav-text">一、PNG格式图片简介</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%BA%8C%E3%80%81libpng-%E7%AE%80%E4%BB%8B"><span class="nav-text">二、libpng 简介  </span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-%E7%AE%80%E4%BB%8B"><span class="nav-text">1. 简介</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-zlib%E5%BA%93%E7%A7%BB%E6%A4%8D"><span class="nav-text">2. zlib库移植</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#2-1-%E4%B8%8B%E8%BD%BD%E6%BA%90%E7%A0%81"><span class="nav-text">2.1 下载源码</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-2-%E7%BC%96%E8%AF%91%E6%BA%90%E7%A0%81"><span class="nav-text">2.2 编译源码</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-3-%E6%8B%B7%E8%B4%9D%E5%88%B0%E5%85%B1%E4%BA%AB%E7%9B%AE%E5%BD%95"><span class="nav-text">2.3 拷贝到共享目录</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-4-%E7%A7%BB%E6%A4%8D%E5%88%B0%E5%BC%80%E5%8F%91%E6%9D%BF"><span class="nav-text">2.4 移植到开发板</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-libpng-%E7%A7%BB%E6%A4%8D"><span class="nav-text">3. libpng 移植  </span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#3-1-%E4%B8%8B%E8%BD%BD%E6%BA%90%E7%A0%81"><span class="nav-text">3.1 下载源码</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-2-%E7%BC%96%E8%AF%91%E6%BA%90%E7%A0%81"><span class="nav-text">3.2 编译源码</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-3-%E6%8B%B7%E8%B4%9D%E5%88%B0%E5%85%B1%E4%BA%AB%E7%9B%AE%E5%BD%95"><span class="nav-text">3.3 拷贝到共享目录</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-4-%E7%A7%BB%E6%A4%8D%E5%88%B0%E5%BC%80%E5%8F%91%E6%9D%BF"><span class="nav-text">3.4 移植到开发板</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%B8%89%E3%80%81libpng-%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="nav-text">三、libpng 的使用</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-%E5%AE%98%E6%96%B9%E5%8F%82%E8%80%83%E6%96%87%E6%A1%A3"><span class="nav-text">1. 官方参考文档</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-libpng-%E7%9A%84%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84"><span class="nav-text">2. libpng 的数据结构  </span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-%E5%88%9B%E5%BB%BA%E5%92%8C%E5%88%9D%E5%A7%8B%E5%8C%96-png-struct-%E5%AF%B9%E8%B1%A1"><span class="nav-text">3. 创建和初始化 png_struct 对象  </span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-%E5%88%9B%E5%BB%BA%E5%92%8C%E5%88%9D%E5%A7%8B%E5%8C%96-png-info-%E5%AF%B9%E8%B1%A1"><span class="nav-text">4. 创建和初始化 png_info 对象  </span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5-%E8%AE%BE%E7%BD%AE%E9%94%99%E8%AF%AF%E8%BF%94%E5%9B%9E%E7%82%B9"><span class="nav-text">5. 设置错误返回点  </span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#5-1-%E9%94%99%E8%AF%AF%E8%BF%94%E5%9B%9E%E7%82%B9%E7%9A%84%E6%A6%82%E5%BF%B5"><span class="nav-text">5.1 错误返回点的概念</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#5-2-setjmp-%E5%92%8C-longjmp"><span class="nav-text">5.2 setjmp 和 longjmp</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#5-3-libpng-%E8%AE%BE%E7%BD%AE%E9%94%99%E8%AF%AF%E8%BF%94%E5%9B%9E%E7%82%B9"><span class="nav-text">5.3 libpng 设置错误返回点  </span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#6-%E6%8C%87%E5%AE%9A%E6%95%B0%E6%8D%AE%E6%BA%90"><span class="nav-text">6. 指定数据源  </span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#7-%E8%AF%BB%E5%8F%96-png-%E5%9B%BE%E5%83%8F%E6%95%B0%E6%8D%AE%E5%B9%B6%E8%A7%A3%E7%A0%81"><span class="nav-text">7. 读取 png 图像数据并解码</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#7-1-high-level-%E6%8E%A5%E5%8F%A3"><span class="nav-text">7.1 high-level 接口  </span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#7-2-low-level-%E6%8E%A5%E5%8F%A3"><span class="nav-text">7.2 low-level 接口  </span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#8-%E8%AF%BB%E5%8F%96%E8%A7%A3%E7%A0%81%E5%90%8E%E7%9A%84%E6%95%B0%E6%8D%AE"><span class="nav-text">8. 读取解码后的数据  </span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#9-%E7%BB%93%E6%9D%9F%E9%94%80%E6%AF%81%E5%AF%B9%E8%B1%A1"><span class="nav-text">9. 结束销毁对象  </span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%9B%9B%E3%80%81%E6%98%BE%E7%A4%BA%E5%AE%9E%E4%BE%8B"><span class="nav-text">四、显示实例</span></a></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="苏木"
      src="/images/avatar.jpg">
  <p class="site-author-name" itemprop="name">苏木</p>
  <div class="site-description" itemprop="description">莫道桑榆晚，为霞尚满天</div>
</div>
<div class="site-state-wrap animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">673</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
          <a href="/categories/">
        <span class="site-state-item-count">42</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
        <span class="site-state-item-count">43</span>
        <span class="site-state-item-name">标签</span>
      </div>
  </nav>
</div>
  <div class="links-of-author animated">
      <span class="links-of-author-item">
        <a href="https://github.com/sumumm" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;sumumm" rel="noopener me" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
  </div>

        </div>
      </div>
    </div>

    
  </aside>


    </div>

    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://sumumm.github.io/post/eba3d429.html">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.jpg">
      <meta itemprop="name" content="苏木">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="苏木">
      <meta itemprop="description" content="莫道桑榆晚，为霞尚满天">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="LV18-01-LCD应用编程-05-显示PNG图片 | 苏木">
      <meta itemprop="description" content="">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          LV18-01-LCD应用编程-05-显示PNG图片
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2024-10-27 19:29:45" itemprop="dateCreated datePublished" datetime="2024-10-27T19:29:45+08:00">2024-10-27</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/" itemprop="url" rel="index"><span itemprop="name">嵌入式开发</span></a>
        </span>
          ，
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/" itemprop="url" rel="index"><span itemprop="name">02IMX6ULL平台</span></a>
        </span>
          ，
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/" itemprop="url" rel="index"><span itemprop="name">LV03-应用开发</span></a>
        </span>
    </span>

  
    <span class="post-meta-break"></span>
    <span class="post-meta-item" title="本文字数">
      <span class="post-meta-item-icon">
        <i class="far fa-file-word"></i>
      </span>
      <span class="post-meta-item-text">本文字数：</span>
      <span>9.5k</span>
    </span>
    <span class="post-meta-item" title="阅读时长">
      <span class="post-meta-item-icon">
        <i class="far fa-clock"></i>
      </span>
      <span class="post-meta-item-text">阅读时长 &asymp;</span>
      <span>35 分钟</span>
    </span>
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody"><p>本文主要是LCD应用编程——显示PNG图片的相关笔记，若笔记中有错误或者不合适的地方，欢迎批评指正😃。</p>
<span id="more"></span>

<!-- Photo: https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/ -->

<details class="folding-tag" blue><summary> 点击查看使用工具及版本 </summary>
              <div class='content'>
              <table>    <tr>        <td align="center" rowspan="5">PC端开发环境</td>        <td align="center" width=150px>Windows</td>        <td align="left">Windows11</td>    </tr>    <tr>        <td align="center">Ubuntu</td>        <td align="left">Ubuntu20.04.2的64位版本</td>      </tr>    <tr>        <td align="center">VMware® Workstation 17 Pro</td>        <td align="left">17.6.0 build-24238078</td>      </tr>    <tr>        <td align="center">终端软件</td>        <td align="left">MobaXterm(Professional Edition v23.0 Build 5042 (license))</td>    </tr>    <tr>        <td align="center">Win32DiskImager</td>        <td align="left">Win32DiskImager v1.0</td>      </tr>    <tr>        <td align="center" rowspan="3">Linux开发板环境</td>        <td align="center">Linux开发板</td>        <td align="left">正点原子 i.MX6ULL Linux 阿尔法开发板</td>      </tr>    <tr>        <td align="center">uboot</td>        <td align="left">NXP官方提供的uboot，NXP提供的版本为uboot-imx-rel_imx_4.1.15_2.1.0_ga(使用的uboot版本为U-Boot 2016.03)</td>      </tr>    <tr>        <td align="center">linux内核</td>        <td align="left">linux-4.15(NXP官方提供)</td>      </tr></table>
              </div>
            </details>

<details class="folding-tag" blue><summary> 点击查看本文参考资料 </summary>
              <div class='content'>
              <table>    <tr>        <td align="center">分类</td>        <td align="center">网址</td>        <td align="center">说明</td>    </tr>    <tr>        <td align="center" rowspan="5">官方网站</td>        <td align="left"><a href="https://www.arm.com/" target="_blank">https://www.arm.com/</a></td>        <td align="left">ARM官方网站，在这里我们可以找到Cotex-Mx以及ARMVx的一些文档</td>    </tr>    <tr>        <td align="left"><a href="https://www.nxp.com.cn/" target="_blank">https://www.nxp.com.cn/ </a></td>        <td align="left">NXP官方网站</td>    </tr>    <tr>        <td align="left"><a href="https://www.nxpic.org.cn/" target="_blank">https://www.nxpic.org.cn/</a></td><td align="left">NXP 官方社区</td>    </tr>    <tr>        <td align="left"><a href="https://u-boot.readthedocs.io/en/latest/" target="_blank">https://u-boot.readthedocs.io/en/latest/</a></td><td align="left">u-boot官网</td>    </tr>    <tr>        <td align="left"><a href="https://www.kernel.org/" target="_blank">https://www.kernel.org/</a></td><td align="left">linux内核官网</td>    </tr>    <tr>        <td align="center" rowspan="5">其他网站</td>        <td align="left"><a href="https://elixir.bootlin.com/linux/v4.15/source/kernel" target="_blank">kernel - Linux source code (v4.15) - Bootlin</a></td>        <td align="left">linux内核源码在线查看</td>    </tr></table>
              </div>
            </details>

<details class="folding-tag" blue><summary> 点击查看相关文件下载 </summary>
              <div class='content'>
              <table>    <tr>        <td align="center">分类</td>        <td align="center">网址</td>        <td align="center">说明</td>    </tr>    <tr>        <td align="center" rowspan="4">NXP</td>        <td align="left"><a href="https://github.com/nxp-imx" target="_blank">https://github.com/nxp-imx</a></td>        <td align="left">NXP imx开发资源GitHub组织，里边会有u-boot和linux内核的仓库</td>    </tr>    <tr>        <td align="left"><a href="https://elixir.bootlin.com/linux/latest/source" target="_blank">https://elixir.bootlin.com/linux/latest/source</a></td>        <td align="left">在线阅读linux kernel源码</td>    </tr>    <tr>        <td align="left"><a href="https://github.com/nxp-imx/linux-imx/releases/tag/rel_imx_4.1.15_2.1.0_ga" target="_blank">nxp-imx/linux-imx/releases/tag/rel_imx_4.1.15_2.1.0_ga</a></td>        <td align="left">NXP linux内核仓库tags中的rel_imx_4.1.15_2.1.0_ga</td>    </tr>    <tr>        <td align="left"><a href="https://github.com/nxp-imx/uboot-imx/releases/tag/rel_imx_4.1.15_2.1.0_ga" target="_blank">nxp-imx/uboot-imx/releases/tag/rel_imx_4.1.15_2.1.0_ga</a></td>        <td align="left">NXP u-boot仓库tags中的rel_imx_4.1.15_2.1.0_ga</td>    </tr>    <tr>        <td align="center" rowspan="2">I.MX6ULL</td>        <td align="left"><a href="https://www.nxp.com.cn/docs/en/data-sheet/IMX6ULLIEC.pdf" target="_blank">i.MX 6ULL Applications Processors for Industrial Products</a></td>        <td align="left">I.MX6ULL 芯片手册（datasheet，可以在线查看）</td>    </tr>    <tr>        <td align="left"><a href="https://www.nxp.com.cn/webapp/Download?colCode=IMX6ULLRM&lang_cd=zh" target="_blank">i.MX 6ULL Applications ProcessorReference Manual</a></td>        <td align="left">I.MX6ULL 参考手册（下载后才能查看，需要登录NXP官网）</td>    </tr></table>
              </div>
            </details>

<h1 id="一、PNG格式图片简介"><a href="#一、PNG格式图片简介" class="headerlink" title="一、PNG格式图片简介"></a><font size=3>一、PNG格式图片简介</font></h1><p>PNG（便携式网络图形格式 PortableNetwork Graphic Format， 简称 PNG） 是一种采用无损压缩算法的位图格式，其设计目的是试图替代 GIF 和 TIFF 文件，同时增加一些 GIF 文件所不具备的特性。 PNG 使用从LZ77 派生的无损数据压缩算法，它压缩比高，生成文件体积小，并且支持透明效果，所以被广泛使用。  </p>
<ul>
<li>无损压缩： PNG 文件采用 LZ77 算法的派生算法进行压缩，其结果是获得高的压缩比，不损失数据。它利用特殊的编码方法标记重复出现的数据，因而对图像的颜色没有影响，也不可能产生颜色的损失，这样就可以重复保存而不降低图像质量。</li>
<li>体积小： 在保证图片清晰、逼真、不失真的前提下， PNG 使用从 LZ77 派生的无损数据压缩算法，它压缩比高，生成文件体积小；</li>
<li>索引彩色模式： PNG-8 格式与 GIF 图像类似，同样采用 8 位调色板将 RGB 彩色图像转换为索引彩色图像。图像中保存的不再是各个像素的彩色信息，而是从图像中挑选出来的具有代表性的颜色编号，每一编号对应一种颜色， 图像的数据量也因此减少，这对彩色图像的传播非常有利。</li>
<li>更优化的网络传输显示： PNG 图像在浏览器上采用流式浏览，即使经过交错处理的图像会在完全下载之前提供浏览者一个基本的图像内容，然后再逐渐清晰起来。它允许连续读出和写入图像数据，这个特性很适合于在通信过程中显示和生成图像。</li>
<li>支持透明效果： PNG 可以为原图像定义 256 个透明层次，使得彩色图像的边缘能与任何背景平滑地融合，从而彻底地消除锯齿边缘。这种功能是 GIF 和 JPEG 没有的。</li>
</ul>
<h1 id="二、libpng-简介"><a href="#二、libpng-简介" class="headerlink" title="二、libpng 简介  "></a><font size=3>二、libpng 简介  </font></h1><h2 id="1-简介"><a href="#1-简介" class="headerlink" title="1. 简介"></a><font size=3>1. 简介</font></h2><p>对于 png 图像，我们可以使用 libpng 库对其进行解码，跟 libjpeg 一样，它也是一套免费、开源的 C 语言函数库，支持对 png 图像文件解码、编码等功能。  </p>
<h2 id="2-zlib库移植"><a href="#2-zlib库移植" class="headerlink" title="2. zlib库移植"></a><font size=3>2. zlib库移植</font></h2><p>zlib 是一套包含了数据压缩算法的函式库，此函数库为自由软件， 是一套免费、开源的 C 语言函数库，所以我们可以获取到它源代码。</p>
<p>libpng 依赖于 zlib 库， 所以要想移植 libpng 先得移植 zlib 库才可以， zlib 也好、 libpng 也好，其实移植过程非常简单，无非就是下载源码、编译源码这样的一些工作。</p>
<h3 id="2-1-下载源码"><a href="#2-1-下载源码" class="headerlink" title="2.1 下载源码"></a><font size=3>2.1 下载源码</font></h3><p>zlib的官网在这里：<a target="_blank" rel="noopener" href="https://www.zlib.net/">zlib Home Site</a></p>
<img data-src="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013110431614.png" alt="image-20241013110431614" />

<p>我们来这里下载源码：<a target="_blank" rel="noopener" href="https://www.zlib.net/fossils/">Index of &#x2F;fossils (zlib.net)</a>，这里我按照教程选择这个1.2.10版本。</p>
<img data-src="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013110642552.png" alt="image-20241013110642552" />

<p>下载后我们解压可以得到：</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">tar xf zlib-1.2.10.tar.gz</span><br><span class="line">cd zlib-1.2.10</span><br><span class="line">ls</span><br></pre></td></tr></table></figure>

<img data-src="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013110845239.png" alt="image-20241013110845239" style="zoom:50%;" />

<h3 id="2-2-编译源码"><a href="#2-2-编译源码" class="headerlink" title="2.2 编译源码"></a><font size=3>2.2 编译源码</font></h3><ul>
<li>创建安装目录</li>
</ul>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mkdir -p /home/sumu/9arm-linux-lib/zlib-1.2.10/zlib_out</span><br></pre></td></tr></table></figure>

<ul>
<li>配置编译选项</li>
</ul>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">export CC=arm-linux-gnueabihf-gcc	#设置交叉编译器</span><br><span class="line">./configure --prefix=/home/sumu/9arm-linux-lib/zlib-1.2.10/zlib_out </span><br></pre></td></tr></table></figure>

<p>–prefix 选项指定 zlib 库的安装目录，将家目录下的 9arm-linux-lib&#x2F;zlib-1.2.10&#x2F;zlib_out 作为 zlib 库的安装目录。zlib的配置命令无法配置交叉编译工具链所以这里使用直接修改CC环境变量。</p>
<img data-src="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013112235314.png" alt="image-20241013112235314" style="zoom:50%;" />

<ul>
<li>编译</li>
</ul>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">make</span><br></pre></td></tr></table></figure>

<img data-src="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013112212188.png" alt="image-20241013112212188" style="zoom:50%;" />

<ul>
<li>安装</li>
</ul>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">make install</span><br></pre></td></tr></table></figure>

<img data-src="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013112305438.png" alt="image-20241013112305438" style="zoom:50%;" />

<p>安装完毕后，我们会得到下面的文件：</p>
<img data-src="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013112457650.png" alt="image-20241013112457650" style="zoom:50%;" />

<p>会发现也有两个软链接，拷贝的时候需要注意一下。</p>
<h3 id="2-3-拷贝到共享目录"><a href="#2-3-拷贝到共享目录" class="headerlink" title="2.3 拷贝到共享目录"></a><font size=3>2.3 拷贝到共享目录</font></h3><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">cp -avf ~/9arm-linux-lib/zlib-1.2.10/zlib_out ~/1sharedfiles/linux_develop/imx6ull-app-demo/lib/zlib-1.2.10</span><br><span class="line">cd ~/1sharedfiles/linux_develop/imx6ull-app-demo/lib/zlib-1.2.10/lib</span><br><span class="line">cp libz.so.1.2.10 libz.so.1</span><br><span class="line">cp libz.so.1.2.10 libz.so</span><br></pre></td></tr></table></figure>

<h3 id="2-4-移植到开发板"><a href="#2-4-移植到开发板" class="headerlink" title="2.4 移植到开发板"></a><font size=3>2.4 移植到开发板</font></h3><p>先拷贝到nfs服务器目录：</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cp -a ~/9arm-linux-lib/zlib-1.2.10/zlib_out ~/4nfs/zlib-1.2.10</span><br></pre></td></tr></table></figure>

<p>然后在串口终端，进入到 zlib 安装目录，将 lib 目录下的所有库文件拷贝到 Linux 系统&#x2F;usr&#x2F;lib 目录，注意在拷贝之前，先将开发板出厂系统中已经移植好的zlib库文件删除，执行下面这条命令：  </p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">先备份删除的文件</span></span><br><span class="line">cd /usr/lib</span><br><span class="line">tar -czf libz_usr_lib.bk.tar.gz libz.*</span><br><span class="line">mv libz_usr_lib.bk.tar.gz ~/nfs_temp/</span><br><span class="line"></span><br><span class="line">cd /lib</span><br><span class="line">tar -czf libz_lib.bk.tar.gz libz.*</span><br><span class="line">mv libz_lib.bk.tar.gz ~/nfs_temp/</span><br><span class="line"></span><br><span class="line">rm -rf /usr/lib/libz.* /lib/libz.*</span><br></pre></td></tr></table></figure>

<p>删除之后，再将编译得到的 zlib 库文件拷贝到开发板&#x2F;usr&#x2F;lib 目录，拷贝库文件时，需要注意符号链接的问题，不能破坏原有的符号链接。  </p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cp -avf ~/nfs_temp/zlib-1.2.10/lib/* /usr/lib</span><br></pre></td></tr></table></figure>

<p>拷贝完毕后检查一下软链接：</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ls -alh /usr/lib/libz*</span><br></pre></td></tr></table></figure>

<img data-src="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013113931404.png" alt="image-20241013113931404" />

<h2 id="3-libpng-移植"><a href="#3-libpng-移植" class="headerlink" title="3. libpng 移植  "></a><font size=3>3. libpng 移植  </font></h2><h3 id="3-1-下载源码"><a href="#3-1-下载源码" class="headerlink" title="3.1 下载源码"></a><font size=3>3.1 下载源码</font></h3><p>这个的官网在这里：<a target="_blank" rel="noopener" href="http://www.libpng.org/pub/png/libpng.html">libpng Home Page</a></p>
<img data-src="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013163719902.png" alt="image-20241013163719902" />

<p>我们到这里下载源码：<a target="_blank" rel="noopener" href="https://github.com/pnggroup/libpng/tags">Tags · pnggroup&#x2F;libpng (github.com)</a>，这里我直接选择最新版本：</p>
<img data-src="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013164409026.png" alt="image-20241013164409026" />

<p>我们找到这个1.6.44版本，下载后解压：</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">tar xf libpng-1.6.44.tar.gz</span><br><span class="line">cd libpng-1.6.44</span><br><span class="line">ls</span><br></pre></td></tr></table></figure>

<img data-src="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013164615321.png" alt="image-20241013164615321" style="zoom:50%;" />

<h3 id="3-2-编译源码"><a href="#3-2-编译源码" class="headerlink" title="3.2 编译源码"></a><font size=3>3.2 编译源码</font></h3><ul>
<li>创建安装目录</li>
</ul>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mkdir -p /home/sumu/9arm-linux-lib/libpng-1.6.44/libpng_out</span><br></pre></td></tr></table></figure>

<ul>
<li>配置编译选项</li>
</ul>
<p>libpng 依赖于 zlib 库，前面我们已经将 zlib 库编译成功了，但是我们得告知编译器 zlib 库的安装目录，这样编译器才能找到 zlib 的库文件以及头文件，编译 libpng 的时才不会报错。  </p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">export LDFLAGS=&quot;$&#123;LDFLAGS&#125; -L/home/sumu/9arm-linux-lib/zlib-1.2.10/zlib_out/lib&quot;</span><br><span class="line">export CFLAGS=&quot;$&#123;CFLAGS&#125; -I/home/sumu/9arm-linux-lib/zlib-1.2.10/zlib_out/include&quot;</span><br><span class="line">export CPPFLAGS=&quot;$&#123;CPPFLAGS&#125; -I/home/sumu/9arm-linux-lib/zlib-1.2.10/zlib_out/include&quot;</span><br></pre></td></tr></table></figure>

<p>然后我们来配置一下源码工程：</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">./configure --host=arm-linux-gnueabi --prefix=/home/sumu/9arm-linux-lib/libpng-1.6.44/libpng_out</span><br></pre></td></tr></table></figure>

<img data-src="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013165015077.png" alt="image-20241013165015077" style="zoom:50%;" />

<ul>
<li>编译</li>
</ul>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">make</span><br></pre></td></tr></table></figure>

<img data-src="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013165116048.png" alt="image-20241013165116048" style="zoom:50%;" />

<p>可以看到我们配置的zlib的目录是生效的，不出意外的话，到这里就编译结束了。</p>
<ul>
<li>安装</li>
</ul>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">make install</span><br></pre></td></tr></table></figure>

<img data-src="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013165215109.png" alt="image-20241013165215109" style="zoom:50%;" />

<p>然后我们来看一下输出目录的文件：</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line">sumu@sumu-virtual-machine:~/9arm-linux-lib/libpng-1.6.44$ cd libpng_out/</span><br><span class="line">sumu@sumu-virtual-machine:~/9arm-linux-lib/libpng-1.6.44/libpng_out$ tree</span><br><span class="line">.</span><br><span class="line">├── bin</span><br><span class="line">│   ├── libpng16-config</span><br><span class="line">│   ├── libpng-config -&gt; libpng16-config</span><br><span class="line">│   ├── pngfix</span><br><span class="line">│   └── png-fix-itxt</span><br><span class="line">├── include</span><br><span class="line">│   ├── libpng16</span><br><span class="line">│   │   ├── pngconf.h</span><br><span class="line">│   │   ├── png.h</span><br><span class="line">│   │   └── pnglibconf.h</span><br><span class="line">│   ├── pngconf.h -&gt; libpng16/pngconf.h</span><br><span class="line">│   ├── png.h -&gt; libpng16/png.h</span><br><span class="line">│   └── pnglibconf.h -&gt; libpng16/pnglibconf.h</span><br><span class="line">├── lib</span><br><span class="line">│   ├── libpng16.a</span><br><span class="line">│   ├── libpng16.la</span><br><span class="line">│   ├── libpng16.so -&gt; libpng16.so.16.44.0</span><br><span class="line">│   ├── libpng16.so.16 -&gt; libpng16.so.16.44.0</span><br><span class="line">│   ├── libpng16.so.16.44.0</span><br><span class="line">│   ├── libpng.a -&gt; libpng16.a</span><br><span class="line">│   ├── libpng.la -&gt; libpng16.la</span><br><span class="line">│   ├── libpng.so -&gt; libpng16.so</span><br><span class="line">│   └── pkgconfig</span><br><span class="line">│       ├── libpng16.pc</span><br><span class="line">│       └── libpng.pc -&gt; libpng16.pc</span><br><span class="line">└── share</span><br><span class="line">    └── man</span><br><span class="line">        ├── man3</span><br><span class="line">        │   ├── libpng.3</span><br><span class="line">        │   └── libpngpf.3</span><br><span class="line">        └── man5</span><br><span class="line">            └── png.5</span><br><span class="line"></span><br><span class="line">9 directories, 23 files</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>可以看到文件还是比较多的。lib目录下也有不少的软链接。</p>
<h3 id="3-3-拷贝到共享目录"><a href="#3-3-拷贝到共享目录" class="headerlink" title="3.3 拷贝到共享目录"></a><font size=3>3.3 拷贝到共享目录</font></h3><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">cp -avf ~/9arm-linux-lib/libpng-1.6.44/libpng_out ~/1sharedfiles/linux_develop/imx6ull-app-demo/lib/libpng-1.6.44</span><br><span class="line">cd ~/1sharedfiles/linux_develop/imx6ull-app-demo/lib/libpng-1.6.44</span><br><span class="line"></span><br><span class="line">cd ~/1sharedfiles/linux_develop/imx6ull-app-demo/lib/libpng-1.6.44/bin</span><br><span class="line">cp -avf libpng16-config libpng-config</span><br><span class="line"></span><br><span class="line">cd ~/1sharedfiles/linux_develop/imx6ull-app-demo/lib/libpng-1.6.44/include</span><br><span class="line">cp -avf libpng16/pngconf.h pngconf.h</span><br><span class="line">cp -avf libpng16/png.h png.h</span><br><span class="line">cp -avf libpng16/pnglibconf.h pnglibconf.h</span><br><span class="line"></span><br><span class="line">cd ~/1sharedfiles/linux_develop/imx6ull-app-demo/lib/libpng-1.6.44/lib</span><br><span class="line">cp -avf libpng16.so.16.44.0 libpng16.so</span><br><span class="line">cp -avf libpng16.so.16.44.0 libpng16.so.16</span><br><span class="line"></span><br><span class="line">cp -avf libpng16.a libpng.a</span><br><span class="line">cp -avf libpng16.la libpng.la</span><br><span class="line">cp -avf libpng16.so libpng.so</span><br><span class="line"></span><br><span class="line">cd ~/1sharedfiles/linux_develop/imx6ull-app-demo/lib/libpng-1.6.44/lib/pkgconfig</span><br><span class="line">cp -avf libpng16.pc libpng.pc</span><br><span class="line"></span><br><span class="line">cd ~/1sharedfiles/linux_develop/imx6ull-app-demo/lib/libpng-1.6.44</span><br></pre></td></tr></table></figure>

<h3 id="3-4-移植到开发板"><a href="#3-4-移植到开发板" class="headerlink" title="3.4 移植到开发板"></a><font size=3>3.4 移植到开发板</font></h3><p>先拷贝到nfs服务器目录：</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cp -avf ~/9arm-linux-lib/libpng-1.6.44/libpng_out ~/4nfs/libpng-1.6.44</span><br></pre></td></tr></table></figure>

<p>然后在串口终端，进入到 libpng 安装目录，将 bin 目录下的所有测试工具拷贝到开发板 Linux 系统&#x2F;usr&#x2F;bin 目录（也可以不拷贝，也不怎么用）；将 lib 目录下的所有库文件拷贝到 Linux 系统&#x2F;usr&#x2F;lib 目录，注意在拷贝之前，先将开发板出厂系统中已经移植好的libpng 库文件删除，执行下面这条命令：  </p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta prompt_"># </span><span class="language-bash">先备份删除的文件</span></span><br><span class="line">cd /usr/lib</span><br><span class="line">ls -alh libpng*</span><br><span class="line">tar -czf libpng_usr_lib.bk.tar.gz libpng*</span><br><span class="line">mv libpng_usr_lib.bk.tar.gz ~/nfs_temp/</span><br><span class="line"><span class="meta prompt_"></span></span><br><span class="line"><span class="meta prompt_"># </span><span class="language-bash">其实libpng相关的库并没有放在/lib目录中，所以这里其实可以不用管</span></span><br><span class="line">cd /lib</span><br><span class="line">ls -alh libpng*</span><br><span class="line">tar -czf libpng_lib.bk.tar.gz libpng*</span><br><span class="line">mv libpng_lib.bk.tar.gz ~/nfs_temp/</span><br><span class="line"></span><br><span class="line">rm -rvf /lib/libpng* /usr/lib/libpng*</span><br></pre></td></tr></table></figure>

<p>删除之后，再将编译得到的 libpng 库文件拷贝到开发板&#x2F;usr&#x2F;lib 目录，拷贝库文件时，需要注意符号链接的问题，不能破坏原有的符号链接。</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cp -avf ~/nfs_temp/libpng-1.6.44/lib/lib* /usr/lib</span><br></pre></td></tr></table></figure>

<p>拷贝过去之后，开发板&#x2F;usr&#x2F;lib 目录下就应该存在这些库文件：</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ls -alh /usr/lib/libpng*</span><br></pre></td></tr></table></figure>

<p>如下所示：  </p>
<img data-src="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013171315056.png" alt="image-20241013171315056" />

<h1 id="三、libpng-的使用"><a href="#三、libpng-的使用" class="headerlink" title="三、libpng 的使用"></a><font size=3>三、libpng 的使用</font></h1><p>libpng 除了解码功能之外，还包含编码功能，也就是创建 png 压缩文件，这里我们主要是学习PNG图片的解码，将一张PNG图片显示到LCD屏幕上。</p>
<h2 id="1-官方参考文档"><a href="#1-官方参考文档" class="headerlink" title="1. 官方参考文档"></a><font size=3>1. 官方参考文档</font></h2><p>libpng 官方提供一份非常详细地使用文档，文档的主页在这里：<a target="_blank" rel="noopener" href="http://www.libpng.org/pub/png/">PNG (Portable Network Graphics) Home Site (libpng.org)</a></p>
<img data-src="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013184139133.png" alt="image-20241013184139133" />

<p>我们点击左上角的<a target="_blank" rel="noopener" href="http://www.libpng.org/pub/png/png-sitemap.html#info"><strong>General Information</strong></a>，可以来到这里，其实吧，一直往下拉也能找到：<a target="_blank" rel="noopener" href="http://www.libpng.org/pub/png/pngdocs.html">PNG Documentation (libpng.org)</a>，然后我们点击下图的文档：</p>
<img data-src="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013183910923.png" alt="image-20241013183910923" />

<p>我们就可以就看到一些说明文档链接啦：</p>
<img data-src="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013183941341.png" alt="image-20241013183941341" style="zoom:50%;" />

<p>我们可以参考以下两份文档来学习。</p>
<ul>
<li><p><a target="_blank" rel="noopener" href="http://www.libpng.org/pub/png/libpng-1.4.0-manual.pdf">libpng-1.4.0-manual.pdf</a></p>
</li>
<li><p><a target="_blank" rel="noopener" href="http://www.libpng.org/pub/png/libpng-manual.txt">libpng.org&#x2F;pub&#x2F;png&#x2F;libpng-manual.txt</a></p>
</li>
</ul>
<h2 id="2-libpng-的数据结构"><a href="#2-libpng-的数据结构" class="headerlink" title="2. libpng 的数据结构  "></a><font size=3>2. libpng 的数据结构  </font></h2><p>首先，使用 libpng 库需要包含它的头文件&lt;png.h&gt;。 png.h 头文件中包含了 API、数据结构的申明， libpng中有两个很重要的数据结构体： png_struct 和 png_info。</p>
<p>png_struct 作为 libpng 库函数内部使用的一个数据结构体，除了作为传递给每个 libpng 库函数调用的第一个变量外，在大多数情况下不会被用户所使用。 使用 libpng 之前， 需要创建一个 png_struct 对象并对其进行初始化操作，该对象由 libpng 库内部使用，调用 libpng 库函数时， 通常需要把这个对象作为参数传入。</p>
<p>png_info 数据结构体描述了 png 图像的信息， 在以前旧的版本中，用户可以直接访问 png_info 对象中的成员， 如查看图像的宽、高、像素深度、 修改解码参数等； 然而，这往往会导致出现一些问题，因此新的版本中专门开发了一组 png_info 对象的访问接口： get 方法 png_get_XXX 和 set 方法 png_set_XXX， 建议通过 API 来访问这些成员。  </p>
<h2 id="3-创建和初始化-png-struct-对象"><a href="#3-创建和初始化-png-struct-对象" class="headerlink" title="3. 创建和初始化 png_struct 对象  "></a><font size=3>3. 创建和初始化 png_struct 对象  </font></h2><p>首先第一步是创建 png_struct 对象、并对其进行初始化操作，使用 png_create_read_struct()函数创建一个 png_struct 对象、并完成初始化操作， read 表示我们需要创建的是一个用于 png 解码的 png_struct 对象；同理可以使用 png_create_write_struct()创建一个用于 png 编码的 png_struct 对象。 </p>
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">png_structp <span class="title function_">png_create_read_struct</span><span class="params">(png_const_charp user_png_ver, png_voidp error_ptr, png_error_ptr error_fn,png_error_ptr warn_fn)</span>;</span><br></pre></td></tr></table></figure>

<p>它的是返回值是一个 png_structp 指针，指向一个 png_struct 对象；所以 png_create_read_struct()函数创建 png_struct 对象之后，会返回一个指针给调用者，该指针指向所创建的 png_struct 对象。 但如果创建对象失败，则会返回 NULL，所以调用者可以通过判断返回值是否为 NULL 来确定 png_create_read_struct()函数执行是否成功！  </p>
<p>该函数有 4 个参数， 第一个参数 user_png_ver 指的是 libpng 的版本信息，通常将其设置为PNG_LIBPNG_VER_STRING，这是 png.h 头文件中定义的一个宏，其内容便是 libpng 的版本号信息，如下：  </p>
 <figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#<span class="keyword">define</span> PNG_LIBPNG_VER_STRING <span class="string">&quot;1.6.44&quot;</span></span></span><br></pre></td></tr></table></figure>

<p>创建、初始化 png_struct 对象时， 调用者可以指定自定义的错误处理函数和自定义的警告处理函数，通过参数 error_fn 指向自定义的错误处理函数、通过参数 warn_fn 指向自定义的警告处理函数， 而参数 error_ptr表示传递给这些函数所使用的数据结构的指针； 当然也可将它们设置为 NULL，表示使用 libpng 默认的错误处理函数以及警告函数。 使用示例如下：  </p>
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">png_structp png_ptr = <span class="literal">NULL</span>;</span><br><span class="line">png_ptr = png_create_read_struct(PNG_LIBPNG_VER_STRING, <span class="literal">NULL</span>, <span class="literal">NULL</span>, <span class="literal">NULL</span>);</span><br><span class="line"><span class="keyword">if</span> (!png_ptr)</span><br><span class="line">&#123;</span><br><span class="line">	<span class="keyword">return</span> <span class="number">-1</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="4-创建和初始化-png-info-对象"><a href="#4-创建和初始化-png-info-对象" class="headerlink" title="4. 创建和初始化 png_info 对象  "></a><font size=3>4. 创建和初始化 png_info 对象  </font></h2><p>png_info数据结构体描述了png图像的信息，同样也需要创建png_info对象，调用png_create_info_struct()函数创建一个 png_info 对象，其函数原型如下所示：  </p>
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">png_infop <span class="title function_">png_create_info_struct</span><span class="params">(png_const_structrp png_ptr)</span>;</span><br></pre></td></tr></table></figure>

<p>该函数返回一个 png_infop 指针，指向一个 png_info 对象，所以 png_create_info_struct()函数创建 png_info对象之后，会将它的指针返回给调用者；如果创建失败，则会返回 NULL，所以调用者可以通过判断返回值是否为 NULL 来确定函数调用是否成功！  </p>
<p>该函数有一个参数，需要传入一个png_struct对象的指针，内部会将它们之间建立关联，当销毁png_struct对象时、也可将 png_info 对象销毁。 使用示例如下：  </p>
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">png_infop info_ptr = <span class="literal">NULL</span>;</span><br><span class="line">info_ptr = png_create_info_struct(png_const_structrp png_ptr);</span><br><span class="line"><span class="keyword">if</span> (<span class="literal">NULL</span> == info_ptr) </span><br><span class="line">&#123;</span><br><span class="line">    png_destroy_read_struct(&amp;png_ptr, <span class="literal">NULL</span>, <span class="literal">NULL</span>);</span><br><span class="line">    <span class="keyword">return</span> <span class="number">-1</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>png_destroy_read_struct()函数用于销毁 png_struct 对象。  </p>
<h2 id="5-设置错误返回点"><a href="#5-设置错误返回点" class="headerlink" title="5. 设置错误返回点  "></a><font size=3>5. 设置错误返回点  </font></h2><h3 id="5-1-错误返回点的概念"><a href="#5-1-错误返回点的概念" class="headerlink" title="5.1 错误返回点的概念"></a><font size=3>5.1 错误返回点的概念</font></h3><p>调用 png_create_read_struct()函数创建 png_struct 对象时，调用者可以指定一个自定义的错误处理函数，当 libpng 工作发生错误时，它就会执行这个错误处理函数；但如果调用者并未指定自定义的错误处理函数，那么 libpng 将会使用默认的错误处理函数，其实默认的错误处理函数会执行一个跳转动作，跳转到程序中的某一个位置，我们把这个位置称为错误返回点。</p>
<p>这样，当调用者未指定自定义错误处理函数时， 当 libpng 遇到错误时， 它会执行默认错误处理函数，而默认错误处理函数会跳转到错误返回点，通常这个错误返回点就是在我们程序中的某个位置，我们期望libpng 发生错误时能够回到我们的程序中， 为什么要这样做呢？因为发生错误时不能直接终止退出，而需要执行释放、销毁等清理工作，例如前面创建的 png_struct 和 png_info 对象，需要销毁，避免内存泄漏。</p>
<p>那如何在我们的程序中设置错误返回点呢？ 在此之前，需要学习两个库函数： setjmp 和 longjmp。  </p>
<p>在 C 语言中，在一个函数中执行跳转，我们可以使用 goto 语句，尤其是在开发驱动程序时；但 goto 语句只能在一个函数内部进行跳转，不能跨越函数，例如从 func1()函数跳转到func2()函数，如果想要实现这种跨越函数间的跳转，在 Linux 下，我们可以使用库函数 setjmp 和 longjmp。 </p>
<h3 id="5-2-setjmp-和-longjmp"><a href="#5-2-setjmp-和-longjmp" class="headerlink" title="5.2 setjmp 和 longjmp"></a><font size=3>5.2 setjmp 和 longjmp</font></h3><p>setjmp 函数用于设置跳转点，也就是跳转位置； longjmp 执行跳转，那么它会跳转到 setjmp 函数所设置的跳转点，来看看这两个函数的原型：  </p>
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;setjmp.h&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="type">int</span> <span class="title function_">setjmp</span><span class="params">(jmp_buf env)</span>;</span><br><span class="line"><span class="type">void</span> <span class="title function_">longjmp</span><span class="params">(jmp_buf env, <span class="type">int</span> val)</span>;</span><br></pre></td></tr></table></figure>

<p>可以看到 setjmp 和 longjmp 函数都有一个 env 参数，这是一个 jmp_buf 类型的参数， jmp_buf 是一种特殊类型，当调用 setjmp()时，它会把当前进程环境的各种信息保存到 env 参数中，而调用 longjmp()也必须指定相同的参数，这样才可跳转到 setjmp 所设置的跳转点。  </p>
<p>从编程角度来看，调用 longjmp()函数后，看起来就和第二次调用 setjmp()返回时完全一样，可以通过检查 setjmp()函数的返回值，来区分 setjmp()是初次调用返回还是第二次“返回”，初始调用返回值为 0，后续“伪”返回的返回值为 longjmp()调用中参数 val 所指定的任意值，通过对 val 参数使用不同的值，可以区分出程序中跳转到同一位置的多个不同的起跳位置。  </p>
<p>所以，通常情况下，调用 longjmp()时，不会将参数 val 设置为 0，这样将会导致无法区分 setjmp()是初次返回还是后续的“伪”返回，这里要注意，可以看一个实例：</p>
 <figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;stdio.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;stdlib.h&gt;</span></span></span><br><span class="line"><span class="meta">#<span class="keyword">include</span> <span class="string">&lt;setjmp.h&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="type">static</span> jmp_buf buf;</span><br><span class="line"><span class="type">static</span> <span class="type">int</span> cnt = <span class="number">0</span>;</span><br><span class="line"></span><br><span class="line"><span class="type">static</span> <span class="type">void</span> <span class="title function_">hello</span><span class="params">(<span class="type">void</span>)</span></span><br><span class="line">&#123;</span><br><span class="line">    cnt++;</span><br><span class="line">    <span class="built_in">printf</span>(<span class="string">&quot;hello world!\n&quot;</span>);</span><br><span class="line">    longjmp(buf,cnt); <span class="comment">// 执行跳转</span></span><br><span class="line">    <span class="built_in">printf</span>(<span class="string">&quot;Nice to meet you!\n&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="type">int</span> <span class="title function_">main</span><span class="params">(<span class="type">void</span>)</span></span><br><span class="line">&#123;</span><br><span class="line">    <span class="type">int</span> ret = <span class="number">-1</span>;</span><br><span class="line"></span><br><span class="line">    ret = setjmp(buf); <span class="comment">//设置跳转</span></span><br><span class="line">    <span class="built_in">printf</span>(<span class="string">&quot;setjmp ret = %d\n&quot;</span>, ret);</span><br><span class="line">    <span class="keyword">if</span>(ret == <span class="number">0</span>) </span><br><span class="line">    &#123;</span><br><span class="line">        <span class="built_in">printf</span>(<span class="string">&quot;First return\n&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">else</span></span><br><span class="line">    &#123;</span><br><span class="line">        <span class="built_in">printf</span>(<span class="string">&quot;Second return\n&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">if</span>(cnt &lt; <span class="number">2</span>)</span><br><span class="line">    &#123;</span><br><span class="line">        hello();</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">printf</span>(<span class="string">&quot;exit main\n&quot;</span>);</span><br><span class="line">    <span class="built_in">exit</span>(<span class="number">0</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>它的打印信息如下：</p>
<img data-src="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013190551607.png" alt="image-20241013190551607" />

<h3 id="5-3-libpng-设置错误返回点"><a href="#5-3-libpng-设置错误返回点" class="headerlink" title="5.3 libpng 设置错误返回点  "></a><font size=3>5.3 libpng 设置错误返回点  </font></h3><p>libpng 库默认也使用 setjmp&#x2F;longjmp 这两个库函数组合来处理发生错误时的跳转，当 libpng 遇到错误时，执行默认错误处理函数，默认错误处理函数会调用 longjmp()来进行跳转，所以我们需要使用 setjmp()来为 libpng 设置一个错误返回点。设置方法如下：  </p>
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 设置错误返回点 */</span></span><br><span class="line"><span class="keyword">if</span> (setjmp(png_jmpbuf(png_ptr))) </span><br><span class="line">&#123;</span><br><span class="line">    png_destroy_read_struct(&amp;png_ptr, &amp;info_ptr, <span class="literal">NULL</span>);</span><br><span class="line">    <span class="keyword">return</span> <span class="number">-1</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>png_jmpbuf()函数可以获取到 png_struct 对象中的 jmp_buf 变量，那么后续 libpng 库调用 longjmp 执行跳转时也是使用这个变量。 我们可以在错误返回点执行一些清理工作。  </p>
<h2 id="6-指定数据源"><a href="#6-指定数据源" class="headerlink" title="6. 指定数据源  "></a><font size=3>6. 指定数据源  </font></h2><p>就是指定需要进行解码的 png 图像，通常可以使用多种方式来指定数据源，例如文件输入流、内存中的数据流等，这里以文件输入流为例。  </p>
<p>libpng 提供了 png_init_io()函数， png_init_io()可以指定数据源，该数据源以文件输入流的方式提供，来看看函数原型 ：</p>
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">png_init_io(png_structrp png_ptr, png_FILE_p fp);</span><br></pre></td></tr></table></figure>

<p>第一个参数是 png_ptr，指向 png_struct 对象；而第二个参数 fp 则是一个 png_FILE_p 类型指针，其实就是标准 I&#x2F;O 中的 FILE *指针。所以由此可知，我们需要先使用 fopen()函数将 png 文件打开，然后得到指向该文件的 FILE *类型指针。  </p>
<p>使用示例如下：  </p>
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">FILE *png_file = <span class="literal">NULL</span>;</span><br><span class="line"><span class="comment">/* 打开 png 文件 */</span></span><br><span class="line">png_file = fopen(<span class="string">&quot;image.png&quot;</span>, <span class="string">&quot;r&quot;</span>); <span class="comment">//以只读方式打开</span></span><br><span class="line"><span class="keyword">if</span> (<span class="literal">NULL</span> == png_file) </span><br><span class="line">&#123;</span><br><span class="line">    perror(<span class="string">&quot;fopen error&quot;</span>);</span><br><span class="line">    <span class="keyword">return</span> <span class="number">-1</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* 指定数据源 */</span></span><br><span class="line">png_init_io(png_ptr, png_file);</span><br></pre></td></tr></table></figure>

<h2 id="7-读取-png-图像数据并解码"><a href="#7-读取-png-图像数据并解码" class="headerlink" title="7. 读取 png 图像数据并解码"></a><font size=3>7. 读取 png 图像数据并解码</font></h2><p>从 png 文件中读取数据并进行解码，将解码后的图像数据存放在内存中，待用户读取。 关于这一步的操作， libpng 提供了两种方式去处理： high-level 接口处理和 low-level 接口处理。其实 high-level 只是对 lowlevel 方式进行了一个封装，使用 high-level 接口非常方便只需一个函数即可，但缺点是灵活性不高、被限定了；而 low-level 接口恰好相反， 灵活性高、但需要用户调用多个 API； 所以具体使用哪种方式要看需求。  </p>
<h3 id="7-1-high-level-接口"><a href="#7-1-high-level-接口" class="headerlink" title="7.1 high-level 接口  "></a><font size=3>7.1 high-level 接口  </font></h3><p>通常在满足以下两个条件时使用 high-level 接口：  </p>
<ul>
<li><p>用户的内存空间足够大， 可以一次性存放整个 png 文件解码后的数据；</p>
</li>
<li><p>数据输出格式限定为 libpng 预定义的数据转换格式。</p>
</li>
</ul>
<p>在满足以上两个条件时， 可以使用 high-level 接口， libpng 预定义数据转换类型包括：  </p>
<table>
<thead>
<tr>
<th>libpng 预定义转换类型</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>PNG_TRANSFORM_IDENTITY</td>
<td>No transformation</td>
</tr>
<tr>
<td>PNG_TRANSFORM_STRIP_16</td>
<td>Strip 16-bit samples to 8 bits</td>
</tr>
<tr>
<td>PNG_TRANSFORM_STRIP_ALPHA</td>
<td>Discard the alpha channel</td>
</tr>
<tr>
<td>PNG_TRANSFORM_PACKING</td>
<td>Expand 1, 2 and 4-bit samples to bytes</td>
</tr>
<tr>
<td>PNG_TRANSFORM_PACKSWAP</td>
<td>Change order of packed pixels to LSB first</td>
</tr>
<tr>
<td>PNG_TRANSFORM_EXPAND</td>
<td>Perform set_expand()</td>
</tr>
<tr>
<td>PNG_TRANSFORM_INVERT_MONO</td>
<td>Invert monochrome images</td>
</tr>
<tr>
<td>PNG_TRANSFORM_SHIFT</td>
<td>Normalize pixels to the sBIT depth</td>
</tr>
<tr>
<td>PNG_TRANSFORM_BGR</td>
<td>Flip RGB to BGR, RGBA to BGRA</td>
</tr>
<tr>
<td>PNG_TRANSFORM_SWAP_ALPHA</td>
<td>Flip RGBA to ARGB or GA to AG</td>
</tr>
<tr>
<td>PNG_TRANSFORM_INVERT_ALPHA</td>
<td>Change alpha from opacity to transparency</td>
</tr>
<tr>
<td>PNG_TRANSFORM_SWAP_ENDIAN</td>
<td>Byte-swap 16-bit samples</td>
</tr>
<tr>
<td>PNG_TRANSFORM_GRAY_TO_RGB</td>
<td>Expand grayscale samples to RGB (or GA to RGBA)</td>
</tr>
</tbody></table>
<p>这些转换当中，还不包括背景颜色设置（透明图） 、伽马变换、抖动和填充物等，使用 high-level 接口只能使用以上这些预定义的转换类型，而其它的配置则保持默认。  </p>
<p>high-level 接口只需要使用一个函数 png_read_png()，调用该函数将一次性把整个 png 文件的图像数据解码出来、将解码后的数据存放在内存中，如下所示：  </p>
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">png_read_png(png_structrp png_ptr, png_inforp info_ptr, <span class="type">int</span> transforms, png_voidp params);</span><br></pre></td></tr></table></figure>

<p>第一个参数 png_ptr 为指向 png_struct 对象的指针，第二个参数 info_ptr 为指向 png_info 对象的指针；而第三个参数 transforms 为整型参数， 取值为上表所列出的 libpng 预定义的数据转换类型，可以使用 or（C语言的或 | 运算符）组合多个转换类型。 使用示例如下：  </p>
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">png_read_png(png_ptr, info_ptr, PNG_TRANSFORM_STRIP_ALPHA, <span class="literal">NULL</span>);</span><br></pre></td></tr></table></figure>

<p>该函数相当于调用一系列 low-level 函数（后面会学习） ， 调用顺序如下所示：  </p>
<p>（1） 调用 png_read_info 函数获得 png 图像信息；</p>
<p>（2）根据参数 transforms 所指定的转换类型对数据输出转换格式进行设置；</p>
<p>（3）调用 png_read_image 一次性把整个 png 文件的图像数据解码出来、并将解码后的数据存放在内存中。  </p>
<p>（4）调用 png_read_end 结束解码。</p>
<h3 id="7-2-low-level-接口"><a href="#7-2-low-level-接口" class="headerlink" title="7.2 low-level 接口  "></a><font size=3>7.2 low-level 接口  </font></h3><p>使用 low-level 接口，需要用户将函数 png_read_png()所做的事情一步一步执行：  </p>
<p>（1）读取 png 图像的信息  </p>
<p>首先我们要调用 png_read_info()函数获取 png 图像的信息：  </p>
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">png_read_info(png_ptr, info_ptr);</span><br></pre></td></tr></table></figure>

<p>该函数会把 png 图像的信息读入到 info_ptr 指向的 png_info 对象中。  </p>
<p>（2）查询图像的信息  </p>
<p>前面提到 png_read_info()函数会把 png 图像的信息读入到 png_info 对象中，接下来我们可以调用 libpng提供的 API 查询这些信息。  </p>
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="type">unsigned</span> <span class="type">int</span> width = png_get_image_width(png_ptr, info_ptr); <span class="comment">//获取 png 图像的宽度</span></span><br><span class="line"><span class="type">unsigned</span> <span class="type">int</span> height = png_get_image_height(png_ptr, info_ptr); <span class="comment">//获取 png 图像的高度</span></span><br><span class="line"><span class="type">unsigned</span> <span class="type">char</span> depth = png_get_bit_depth(png_ptr, info_ptr); <span class="comment">//获取 png 图像的位深度</span></span><br><span class="line"><span class="type">unsigned</span> <span class="type">char</span> color_type = png_get_color_type(png_ptr, info_ptr); <span class="comment">//获取 png 图像的颜色类型</span></span><br></pre></td></tr></table></figure>

<p>color type 在 png.h 头文件中定义，如下所示：</p>
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* These describe the color_type field in png_info. */</span></span><br><span class="line"><span class="comment">/* color type masks */</span></span><br><span class="line"><span class="meta">#<span class="keyword">define</span> PNG_COLOR_MASK_PALETTE    1</span></span><br><span class="line"><span class="meta">#<span class="keyword">define</span> PNG_COLOR_MASK_COLOR      2</span></span><br><span class="line"><span class="meta">#<span class="keyword">define</span> PNG_COLOR_MASK_ALPHA      4</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/* color types.  Note that not all combinations are legal */</span></span><br><span class="line"><span class="meta">#<span class="keyword">define</span> PNG_COLOR_TYPE_GRAY 0</span></span><br><span class="line"><span class="meta">#<span class="keyword">define</span> PNG_COLOR_TYPE_PALETTE  (PNG_COLOR_MASK_COLOR | PNG_COLOR_MASK_PALETTE)</span></span><br><span class="line"><span class="meta">#<span class="keyword">define</span> PNG_COLOR_TYPE_RGB        (PNG_COLOR_MASK_COLOR)</span></span><br><span class="line"><span class="meta">#<span class="keyword">define</span> PNG_COLOR_TYPE_RGB_ALPHA  (PNG_COLOR_MASK_COLOR | PNG_COLOR_MASK_ALPHA)</span></span><br><span class="line"><span class="meta">#<span class="keyword">define</span> PNG_COLOR_TYPE_GRAY_ALPHA (PNG_COLOR_MASK_ALPHA)</span></span><br><span class="line"><span class="comment">/* aliases */</span></span><br><span class="line"><span class="meta">#<span class="keyword">define</span> PNG_COLOR_TYPE_RGBA  PNG_COLOR_TYPE_RGB_ALPHA</span></span><br><span class="line"><span class="meta">#<span class="keyword">define</span> PNG_COLOR_TYPE_GA  PNG_COLOR_TYPE_GRAY_ALPHA</span></span><br></pre></td></tr></table></figure>

<p>（3）设置解码输出参数（转换参数）  </p>
<p>这步非常重要，用户可以指定数据输出转换的格式，比如 RGB888， BGR888、 ARGB8888 等数据输出格式， libpng 提供了很多 set 方法（png_set_xxxxx 函数）来实现这些设置， 例如如下代码：  </p>
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="type">unsigned</span> <span class="type">char</span> depth = png_get_bit_depth(png_ptr, info_ptr);</span><br><span class="line"><span class="type">unsigned</span> <span class="type">char</span> color_type = png_get_color_type(png_ptr, info_ptr);</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> (<span class="number">16</span> == depth)</span><br><span class="line">	png_set_strip_16(png_ptr); <span class="comment">//将 16 位深度转为 8 位深度</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> (<span class="number">8</span> &gt; depth)</span><br><span class="line">	png_set_expand(png_ptr); <span class="comment">//如果位深小于 8，则扩展为 24-bit RGB</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> (PNG_COLOR_TYPE_GRAY_ALPHA == color_type)</span><br><span class="line">	png_set_gray_to_rgb(png_ptr); <span class="comment">//如果是灰度图，则转为 RGB</span></span><br></pre></td></tr></table></figure>

<p>关于这些函数的作用和使用方法，我们可以打开 libpng 的头文件 png.h 进行查看，每个函数它都有相应的注释信息以及参数列表。 如上我们列举了几个 png_set_xxx 转换函数， 这种转换函数还很多，具体可以查看 libpng 的使用手册以了解他们的作用。  </p>
<p>虽然 libpng 提供了很多转换函数， 可以调用它们对数据的输出格式进行设置， 但是用户的需求是往往无限的，很多输出格式 libpng 并不是原生支持的， 如 YUV565、 RGB565、 YUYV 等，为了解决这样的问题， libpng 允许用户设置自定义转换函数，可以让用户注册自定义转换函数给 libpng 库， libpng 库对输出数据进行转换时，会调用用户注册的自定义转换函数进行转换。  </p>
<p>调用者通过 png_set_read_user_transform_fn()函数向 libpng 注册一个自定义转换函数， 另外调用者还可以通过 png_set_user_transform_info() 函数告诉 libpng 自定义转换函数的用户自定义数据结构和输出数据的详细信息，比如颜色深度、 颜色通道（channel）等等。关于这些内容，我们可以自己去查阅 libpng 的使用帮助文档。</p>
<p>（4）更新 png 数据的详细信息  </p>
<p>经过前面的设置之后， 信息肯定会有一些变化， 我们需要调用 png_read_update_info 函数更新信息：  </p>
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">png_read_update_info(png_ptr, info_ptr);</span><br></pre></td></tr></table></figure>

<p>该函数将会更新保存在 info_ptr 指向的 png_info 对象中的图像信息。  </p>
<p>（5）读取 png 数据并解码  </p>
<p>前面设置完成之后， 接下来便可对 png 文件的数据进行解码了。调用 png_read_image()函数可以一次性把整个 png 文件的图像数据解码出来、并将解码后的数据存放在用户提供的内存区域中， 使用示例如下： </p>
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">png_read_image(png_ptr, row_pointers);</span><br></pre></td></tr></table></figure>

<p>该函数无返回值，参数 png_ptr 指向 png_struct 对象；第二个参数 row_pointers 是一个 png_bytepp 类型的指针变量，也就是 unsigned char **，是一个指针数组，如下所示：  </p>
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">png_bytep row_pointers[height];</span><br></pre></td></tr></table></figure>

<p>调用该函数，需要调用者提供足够大的内存空间，可以保存整个图像的数据，这个内存空间的大小通常是解码后数据的总大小；调用者分配内存空间后， 需要传入指向每一行的指针数组，如下所示：  </p>
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">png_bytep row_pointers[height] = &#123;<span class="number">0</span>&#125;;</span><br><span class="line"><span class="type">size_t</span> rowbytes = png_get_rowbytes(png_ptr, info_ptr);<span class="comment">//获取每一行数据的字节大小</span></span><br><span class="line"><span class="type">int</span> row;</span><br><span class="line"><span class="comment">/* 为每一行数据分配一个缓冲区 */</span></span><br><span class="line"><span class="keyword">for</span> (row = <span class="number">0</span>; row &lt; height; row++)</span><br><span class="line">&#123;</span><br><span class="line">	row_pointers[row] = png_malloc(png_ptr, rowbytes);</span><br><span class="line">&#125;</span><br><span class="line">png_read_image(png_ptr, row_pointers);</span><br></pre></td></tr></table></figure>

<blockquote>
<p>Tips： png_malloc()函数是 libpng 提供的一个 API，其实就等价于库函数 malloc。  </p>
</blockquote>
<p>除了 png_read_image()函数之外， 我们也可以调用 png_read_rows()一次解码 1 行或多行数据、并将解码后的数据存放在用于提供的内存区域中，如：  </p>
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="type">size_t</span> rowbytes = png_get_rowbytes(png_ptr, info_ptr);<span class="comment">//获取每一行数据的字节大小</span></span><br><span class="line">png_bytep row_buf = png_malloc(png_ptr, rowbytes);<span class="comment">//分配分缓冲、用于存储一行数据</span></span><br><span class="line"><span class="type">int</span> row;</span><br><span class="line"><span class="keyword">for</span> (row = <span class="number">0</span>; row &lt; height; row++) </span><br><span class="line">&#123;</span><br><span class="line">    png_read_rows(png_ptr, &amp;row_buf, <span class="literal">NULL</span>, <span class="number">1</span>);<span class="comment">//每次读取、解码一行数据（最后一个数字 1 表示每次 1 行）</span></span><br><span class="line">    <span class="comment">/* 对这一行数据进行处理: 譬如刷入 LCD 显存进行显示 */</span></span><br><span class="line">    do_something();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>png_read_rows 会自动跳转处理下一行数据。  </p>
<p>由此可知，在 low-level 接口，调用 png_read_image()或 png_read_rows()函数都需要向 libpng 提供用于存放数据的内存区域。但是在 high-level 接口中，调用 png_read_png()时我们并不需要自己分配缓冲区，png_read_png()函数内部会自动分配一块缓冲区，那我们如何获取到它分配的缓冲区呢？通过 png_get_rows()函数得到，后面再学习。</p>
<p>（6）png_read_end()结束读取、解码  </p>
<p>当整个 png 文件的数据已经读取、解码完成之后，我们可以调用 png_read_end()结束，代码如下：  </p>
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">png_read_end(png_ptr, info_ptr);</span><br></pre></td></tr></table></figure>

<h2 id="8-读取解码后的数据"><a href="#8-读取解码后的数据" class="headerlink" title="8. 读取解码后的数据  "></a><font size=3>8. 读取解码后的数据  </font></h2><p>解码完成之后，我们便可以去获取解码后的数据了，要么那它们做进一步的处理、要么直接刷入显存显示到 LCD 上； 对于 low-level 方式， 存放图像数据的缓冲区是由调用者分配的， 所以直接从缓冲区中获取数据即可！  </p>
<p>对于 high-level 方式，存放图像数据的缓冲区是由 png_read_png()函数内部所分配的，并将缓冲区与png_struct 对象之间建立了关联，我们可以通过 png_get_rows()函数获取到指向每一行数据缓冲区的指针数组，如下所示：  </p>
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">png_bytepp row_pointers = <span class="literal">NULL</span>;</span><br><span class="line">row_pointers = png_get_rows(png_ptr, info_ptr);<span class="comment">//获取到指向每一行数据缓冲区的指针数组</span></span><br></pre></td></tr></table></figure>

<p>当我们销毁 png_struct 对象时，由 png_read_png()所分配的缓冲区也会被释放归还给操作系统。  </p>
<h2 id="9-结束销毁对象"><a href="#9-结束销毁对象" class="headerlink" title="9. 结束销毁对象  "></a><font size=3>9. 结束销毁对象  </font></h2><p>调用 png_destroy_read_struct()销毁 png_struct 对象，该函数原型如下所示：  </p>
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="type">void</span> <span class="title function_">png_destroy_read_struct</span><span class="params">(png_structpp png_ptr_ptr, png_infopp info_ptr_ptr, png_infopp end_info_ptr_ptr)</span>;</span><br></pre></td></tr></table></figure>

<p>使用方法如下：  </p>
<figure class="highlight c"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">png_destroy_read_struct(png_ptr, info_ptr, <span class="literal">NULL</span>);</span><br></pre></td></tr></table></figure>

<h1 id="四、显示实例"><a href="#四、显示实例" class="headerlink" title="四、显示实例"></a><font size=3>四、显示实例</font></h1><p>代码和Makefile文件可以看这里：<a target="_blank" rel="noopener" href="https://gitee.com/sumumm/imx6ull-app-demo/tree/master/LV18_LCD_DEVICE/05_lcd_show_png">LV18_LCD_DEVICE&#x2F;05_lcd_show_png · 苏木&#x2F;imx6ull-app-demo - 码云 - 开源中国 (gitee.com)</a></p>
<img data-src="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/01%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%80%E5%8F%91/02IMX6ULL%E5%B9%B3%E5%8F%B0/LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/LV18-01-LCD%E5%BA%94%E7%94%A8%E7%BC%96%E7%A8%8B-05-%E6%98%BE%E7%A4%BAPNG%E5%9B%BE%E7%89%87/img/image-20241013193615783.png" alt="image-20241013193615783" />

    </div>

    
    
    

    <footer class="post-footer">




    <div>
        
            <div style="text-align:center;color: #ccc;font-size:14px;">
            ----------本文结束
            <i class="fas fa-fan fa-spin" style="color: #FF1493; font-size: 1rem"></i>
            感谢您的阅读----------
            </div>
        
    </div>





  
  <div class="my_post_copyright"> 
    <p><span>文章标题:</span><a href="/post/eba3d429.html">LV18-01-LCD应用编程-05-显示PNG图片</a></p>
    <p><span>文章作者:</span><a href="/" title="欢迎访问 《苏木》 的学习笔记">苏木</a></p>
    <p><span>发布时间:</span>2024年10月27日 - 19:29</p>
    <p><span>最后更新:</span>2025年06月14日 - 00:25</p>
    <p><span>原始链接:</span><a href="/post/eba3d429.html" title="LV18-01-LCD应用编程-05-显示PNG图片">https://sumumm.github.io/post/eba3d429.html</a></p>
    <p><span>许可协议:</span><i class="fab fa-creative-commons"></i> <a rel="license" href= "https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>  
  </div>
  


          <div class="post-tags">
              <a href="/tags/ALPHA-LV03-%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/" rel="tag"><i class="fa fa-tag"></i> (ALPHA)LV03-应用开发</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/post/def40d61.html" rel="prev" title="LV18-01-LCD应用编程-06-FreeType简介">
                  <i class="fa fa-angle-left"></i> LV18-01-LCD应用编程-06-FreeType简介
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/post/988c7ee6.html" rel="next" title="LV18-01-LCD应用编程-04-显示JPEG图片">
                  LV18-01-LCD应用编程-04-显示JPEG图片 <i class="fa fa-angle-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>






</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">

  <div class="copyright">
    &copy; 2017 – 
    <span itemprop="copyrightYear">2025</span>
    <span class="with-love">
      <i class="fa fa-heart"></i>
    </span>
    <span class="author" itemprop="copyrightHolder">苏木</span>
  </div>
<div class="wordcount">
  <span class="post-meta-item">
    <span class="post-meta-item-icon">
      <i class="fa fa-chart-line"></i>
    </span>
      <span>站点总字数：</span>
    <span title="站点总字数">3.7m</span>
  </span>
  <span class="post-meta-item">
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
      <span>站点阅读时长 &asymp;</span>
    <span title="站点阅读时长">225:26</span>
  </span>
</div>




    <span id="sitetime"></span>
    <script defer language=javascript>
        function siteTime()
        {
            window.setTimeout("siteTime()", 1000);
            var seconds = 1000;
            var minutes = seconds * 60;
            var hours = minutes * 60;
            var days = hours * 24;
            var years = days * 365;
            var today = new Date();
            var todayYear = today.getFullYear();
            var todayMonth = today.getMonth()+1;
            var todayDate = today.getDate();
            var todayHour = today.getHours();
            var todayMinute = today.getMinutes();
            var todaySecond = today.getSeconds();
            /*==================================================
            Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳)
            year        - 作为date对象的年份，为4位年份值
            month       - 0-11之间的整数，做为date对象的月份
            day         - 1-31之间的整数，做为date对象的天数
            hours       - 0(午夜24点)-23之间的整数，做为date对象的小时数
            minutes     - 0-59之间的整数，做为date对象的分钟数
            seconds     - 0-59之间的整数，做为date对象的秒数
            microseconds - 0-999之间的整数，做为date对象的毫秒数
            ==================================================*/
            var t1 = Date.UTC(2017, 
                              5, 
                              19, 
                              0, 
                              0, 
                              0); //北京时间
            var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
            var diff = t2-t1;
            var diffYears = Math.floor(diff/years);
            var diffDays = Math.floor((diff/days)-diffYears*365);
            var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours);
            var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes);
            var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds);
            document.getElementById("sitetime").innerHTML="已在这里 "+diffYears+" 年 "+diffDays+" 天 "+diffHours+" 小时 "+diffMinutes+" 分钟 "+diffSeconds+" 秒";
        }
        siteTime();
    </script>



    </div>
  </footer>

  
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up fa-lg"></i>
    <span>0%</span>
  </div>
  <div class="reading-progress-bar"></div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/next-theme-pjax/0.6.0/pjax.min.js" integrity="sha256-vxLn1tSKWD4dqbMRyv940UYw4sXgMtYcK6reefzZrao=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fancyapps-ui/5.0.28/fancybox/fancybox.umd.js" integrity="sha256-ytMJGN3toR+a84u7g7NuHm91VIR06Q41kMWDr2pq7Zo=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lozad.js/1.16.0/lozad.min.js" integrity="sha256-mOFREFhqmHeQbXpK2lp4nA3qooVgACfh88fpJftLBbc=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/next-boot.js"></script><script src="/js/pjax.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/hexo-generator-searchdb/1.4.1/search.js" integrity="sha256-1kfA5uHPf65M5cphT2dvymhkuyHPQp5A53EGZOnOLmc=" crossorigin="anonymous"></script>
<script src="/js/third-party/search/local-search.js"></script>




  <script src="/js/third-party/fancybox.js"></script>

  <script src="/js/third-party/pace.js"></script>


  




  

  <script class="next-config" data-name="enableMath" type="application/json">true</script><script class="next-config" data-name="mathjax" type="application/json">{"enable":true,"tags":"none","js":{"url":"https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-mml-chtml.js","integrity":"sha256-MASABpB4tYktI2Oitl4t+78w/lyA+D7b/s9GEP0JOGI="}}</script>
<script src="/js/third-party/math/mathjax.js"></script>


 
        <div id="click-show-text"
            data-mobile = false
            data-text = 富强,民主,文明,和谐,自由,平等,公正,法制,爱国,敬业,诚信,友善
            data-fontsize = 15px
            data-random= false>
        </div>
       

      
        <script async src=https://cdn.jsdelivr.net/npm/hexo-next-mouse-effect@latest/click/showText.js></script>
      

      
    




    <script async src="/js/fancybox_param.js"></script>





<!-- APlayer本体 -->



</body>
</html>
